CARLETON × CITYSTUDIO·CASE STUDY·2025
The Kindness Quest
Carleton × CityStudio team capstone public website for child-friendly hate-crime awareness.
Built by a Carleton University / CityStudio Ottawa capstone team, this public website translated hate-crime evidence into a story-led learning experience for children and youth. My role covered UX design, frontend contribution, project coordination, homepage delivery, data visualization, content optimization, and public showcase support.
PROMOTIONAL VIDEO — SCRIPT, VOICE, EDIT, MIX
Promotional video production
I produced, edited, recorded, scripted, and wrote copy for the promotional video. I also led teammates through their own copywriting, refined their scripts, coordinated recording, and handled audio mixing.
Open promotional video
OPENING TURN — WHEN THE DOCUMENTARY PLAN COLLAPSED
The project did not start as a monster quest.
At first, our Anti-HateCrimeCampaign_Proposal_Slide framed the work as a Web-Based Project with Embedded Documentary: research, data, expert interviews, and a call to action. After nearly two months, nobody was willing to be interviewed, so the plan had to be overturned. In another brainstorm, a monster-fighting game idea came to me: what if children could learn about hate crime through a quest instead of a documentary?
OPENING EVIDENCE — ORIGINAL PLAN AND WINTER PIVOT
PRODUCTION PROCESS — FROM WIREFRAME TO DATA WORKFLOW
COLD OPEN
TC 00:00
PROBLEM
Hate-crime awareness is serious, abstract, and difficult to explain to children.
Legal definitions, incident reports, and raw statistics can overwhelm young audiences when they appear without structure. The goal was to give children and youth enough hate-crime evidence to understand the issue without turning the experience into fear.
DIRECTION
How might we turn a sensitive civic topic into a child-friendly learning journey?
Replace dense explanation with a guided quest: modular pages, visual storytelling, interaction.
Replace dense explanation with a guided quest: modular pages, visual storytelling, interaction.
CHALLENGE
Make the topic approachable without making it feel harmless — a safer metaphor and clear choices that still respect the seriousness of hate, unfair treatment, and community safety.
SOLUTION
A web quest that introduces hate-crime awareness through a Hate Monster and child-superhero story, then guides children through recognition, protection, data storytelling, and a quiz-based learning path.
THE CAST
TC 00:33
The Young ExplorerTHE HERO
"Is this safe to look at? Where do I start?"
Needs: pacing, tone, and navigation that support curiosity without overwhelming — the first decision is whether the topic feels safe enough to approach. — audience: children, youth, and future generations
The Hate MonsterTHE VILLAIN
Grows a little every year the reported incidents climb.
Needs: to be understood, not just feared — the metaphor keeps the issue approachable without erasing its seriousness. — the story frame of the quest
STORY CONFLICT
TC 00:44
Defeat the monster?
The first monster-game framing sounded clear: teach children how to defeat the Hate Monster. Then the team pushed back. If the site asks children to fight a monster, are we answering hate with another form of violence?
We brainstormed again and even argued: can we be friendly with the monster if it represents hate crime? Or does the monster lose power when children understand what it is, where it grows, and how to respond safely?
The final framing: learn about the "Hate Crime" monster to "make friends" with it. Not to accept harm, but to name it, inspect it, and weaken the fear around it.
HIGHLIGHTS — THE PAYOFF, UP FRONT
TC 00:55
Three moves that carried the site, each traceable to the observation that demanded it. The process plays in Acts I–III.
HL 01
The homepage is the door into the quest
I created the homepage and helped optimize the site content so the first screen works as an entry point: a large illustrated scene introduces the Hate Monster, the child hero, and the quest structure — before asking anyone to read detailed content.
obs.032 — nobody skips the hard topics. they skip the boring ones.
HL 02
Data that grows the monster
I contributed to the data visualization work. To make the bar chart easier for children to understand, I reframed hate-crime growth as the Hate Monster's growth speed: as reported incidents rise over time, the monster gets taller and harder to ignore. It supports understanding; it claims no measured outcomes.
obs.033 — a statistic becomes evidence when it enters the story.
HL 02B
Monster body as a pie-chart interaction
I mapped hate-crime categories and targeted groups onto the monster's body parts, then made a pie-chart interaction where each part represents a share of the monster. On hover, children can see what that body part stands for and how much of the monster it occupies.
obs.033b — categories become memorable when children can inspect them as parts of one character.
BEFORE HOVER — body parts as category shares
AFTER HOVER — explanation and percent copy
HL 03
A quiz that makes the lesson participatory
The quiz path turns the website from a reading experience into a learning activity — a role, a challenge, and a way to check understanding, extending the monster-and-hero metaphor into a checkpoint.
obs.034 — children remember what they got to decide.
ACT I — OBSERVE
TC 01:40
The design problem was translation, not information access. The capstone came from Carleton in collaboration with CityStudio Ottawa: give children, youth, and future generations enough hate-crime evidence to understand a public-safety topic — without adult policy language, and without graphic framing.
CAPSTONE Carleton × CityStudio Ottawa
AUDIENCE children · youth · future generations
PURPOSE public education · community safety
INSIGHT 01
NEXT GEN
Young audience first
Pacing, tone, navigation, and visual language had to support curiosity while still giving young audiences enough evidence to recognize the issue.
"Invite exploration before explanation."
INSIGHT 02
OTTAWA
A real civic context
CityStudio tied the project to hate-crime awareness and community safety in Ottawa — a public education purpose beyond a class exercise.
"This had to work outside the classroom."
INSIGHT 03
6 HANDS
One story, many contributors
Research, writing, illustration, navigation, implementation, quiz design, data viz, and exhibition materials — combined from multiple teammates.
"The site had to read as one voice."
SHOT 1A — the topic broken into recognition, protection, data, and quiz modules
ACT II — MAP
TC 02:40
Children did not need the topic reduced to a slogan. They needed a careful frame — story, choice, metaphor, and visual evidence working together. So the experience gives children a role in the story, breaks the topic into smaller pages, and moves from passive reading toward participation.
SHOOTING RULES — A CAREFUL FRAME, NOT A SLOGAN
RULE 01
Metaphor makes it approachable without erasing seriousness
RULE 02
Modular pages reduce cognitive load
RULE 03
Visual data turns statistics into story evidence
RULE 04
Quiz interaction reinforces learning through action
ACT III — RESOLVE
TC 03:40
FEATURE PRESENTATION — A PUBLIC WEBSITE, SHOWN IN PUBLIC
The project shipped as two public pages: a CityStudio gateway documenting context, team, and purpose — and the child-facing quest site with themed pages, illustration, embedded data, and a quiz path. Presented at a public showcase on April 10.
GATEWAY CONTEXT
The CityStudio gateway frames the work as a public capstone: team, partner, showcase setting, and project purpose.
PROJECT BODY SITE
The child-facing site: themed pages, illustration, navigation, embedded data, and a quiz path for active exploration.
TEAM DELIVERY
A five-person core team plus one honorary member; my page describes my contribution without claiming sole ownership.
CAPSTONE EXHIBITION — FROM WEBSITE TO ROOM
The capstone was also exhibited in person. We brought the web experience into the room with stickers, postcards, a laptop demo, a large-screen walkthrough, and a visitor drawing board where people could draw their own monsters.
EXHIBIT 01 — team booth, QR codes, postcards, and live site demo
EXHIBIT 02 — participatory board for visitor monster drawings
EXHIBIT 03 — public walkthrough with the website on the room display
CREW CREDITS — MY ROLE ON SET
I helped move the project from civic-education concept to public presentation — coordination, homepage delivery, data visualization, content optimization, and exhibition support.
CREDIT 01
Concept & coordination
Helped shape the child-friendly concept; created the timeline, allocated tasks, checked progress weekly, and supported communication with the professor and community partner.
CREDIT 02
Web & visual contribution
Created the homepage, uploaded and optimized website content, compressed and exported images in Photoshop, and contributed to the project's data visualizations.
CREDIT 03
Showcase support
Produced presentation slides and exhibition video materials; contributed to exhibition setup and on-site activity planning for the public showcase.
CREDIT 04
Promotional video production
I produced, edited, recorded, scripted, and wrote copy for the promotional video. I also led teammates through their own copywriting, refined their scripts, coordinated recording, and handled audio mixing.
FINAL FRAME
TC 04:40
A completed capstone website with a public showcase, not a measured impact claim
"Designing for children, youth, and future generations around serious topics is not simplifying the issue until it becomes shallow. It is building enough structure, metaphor, pacing, and evidence for young audiences to approach it safely — and meaningfully."
2 sites
gateway + child-facing quest, both public — the verified outcome, no invented metrics
Apr 10
public showcase with CityStudio Ottawa — slides, video, and on-site activities
Next Gen
children, youth, and future generations shaped the pacing, tone, and evidence design
EXPECTATIONS VS REALITY
delivered — a completed public capstone website and an offline showcase.
claimed — nothing we didn't verify: no usage, adoption, or learning metrics.
keep — treat the verified outcome as the outcome.
claimed — nothing we didn't verify: no usage, adoption, or learning metrics.
keep — treat the verified outcome as the outcome.
RESHOOT NOTES — WHAT I'D DO DIFFERENTLY
Run structured testing with children, parents, and educators. Measure what children understand before and after the quiz. Refine the data visuals so they stay legible — without making the issue feel like a game score.
CUT TO: SCENE 01 — FROM THE TOP
ArtFac — Designing trust in commission-based systems →
Opening problem: money between strangers is awkward.
Observe like a documentarian × Map like a systems thinker × Deliver like a UX designer
© 2026 Boyi Tan
Roll credits: About · Resume · boyitan0011@gmail.com · LinkedIn